Thank you for purchasing. If you have any questions that are beyond the scope of this documentation, please feel free to contact me.

Rate it if you like it.

"Slant" Admin is a premium admin dashboard theme built with the Powerful AngularJS framework and Bootstrap 3. It is specially designed to give your admin panel a unique and elegant look. It is easy to customize and coded in developer friendly manner.

It is fully responsive admin dashboard template and is adaptive with any size viewport. Solid integration of reusable UI components and latest trending plugins. This theme can be used for type of project applications.

Slant Admin includes many angular based plugins. It is designed to be a complete admin panel for any web project.

Within the download you'll find the following file structure and contents

Once downloaded, unzip the compressed folder and you'll see something like this:

Slant/
├── Slant/                       ───> Contains the develop version of Slant Admin Template.
│   ├── app/                    └──> All application files in this folder.
│   │     ├── data/                       └──> All API data files.
│   │     ├── img/                        └──> All the logo, favicon images etc. 
│   │     ├── js/                          └──> All the custom scripts
│   │     ├── css/                        └──> All the custom stylesheets
│   │     ├── partials/                   └──> All the custom templates
│   │     ├── index.min.html
│   │     └── index.html
│   ├── bower_components                 └──> All bower dependencies
│   ├── grunt                               └──> All grunt task manager files
│   ├── bower.json
│   ├── Gruntfile.js
│   └── package.json
├── version.txt/                    ───> Contains the version of Slant Admin
└── documentation/                ───> The help documentation is.

Important files description:

"bower.json"

is the JSON file of Twitter Bower (You can click the link to know more).

"Gruntfile.js"

is the configure file of Grunt (You can click the link to know more). It is used to configure or define tasks and load Grunt plugins.

"package.json"

is the JSON file of Grunt (You can click the link to know more). This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

In order to utilize Grunt you will need to have installed Node.js on your computer. Also insure that you have NPM installed.
You can check if these are installed properly by opening up a Terminal (Linux or Mac) or Command Prompt (Windows)
and entering the command: node --version and npm --version These commands should output something similar to "v0.10.31" and "1.4.23" respectively.

Please note that any commands must be ran from the project's root folder.

Open the your project folder in the terminal

Once you have Node and npm installed open your terminal and change the directory to your project folder.

On the Mac you can just type

cd

into the command line and then drag and drop the project folder on to the terminal window. This will add the path of the project directory next to the cd you just typed. Hit return and you have changed to your project folder.

On Windows you will have to open cmd.exe and then type in

cd path\to\project\directory

and hit return to change into your project folder.

grunt-cli

In order to be able to run Grunt from the terminal you need to install a little tool called grunt-cli. "cli" stands for "comand line interface". This program only needs to be installed once. It is installed globally so it is available on your computer everywhere. grunt-cli is used to actually run the Grunt installation that we just installed in your project directory locally. This just means that each project can use a different version of Grunt locally without worry.

From the project's root folder type

npm install -g grunt-cli

into the command line and hit return.

Installing Grunt plugins

From the project's root folder type

npm install

into the command line.

Local Server Development

We've made it easy to develop and test on your local machine. You can start a local server by running the command

From the project's root folder type

npm start

into the command line.

This will start a local server and open up your browser.

Then you can start your browser and visit

http://localhost/app/

http://localhost:8080/app/

Grunt Build Tool

This project supports build steps with Grunt. The supported Grunt tasks that this project ships with is:

• Bower Depenecy Inclusion
• Concatenate and minify js files.
• Concatenate and minify css files.

To build your project, from the project's root folder type

grunt build:angular

It will create the angular folder in your project root directory. You can access it in your brower at:

http://localhost/angular/

Bower is a front-end package manager for the web by Twitter.

Slant use Bower to manage all the front end dependencies, make things clean, tidy and simple.

If you haven't try Bower before, then give it a shot, it makes life easier, you'll fail in love with it.

Inside the bower.json file of Bower, you'll see the list dependencies (package name and version):

If you want to know more about the packages, you can click here. Search the package and click the link to know more.

To ensure you have all updated the Javascript libraries managed by bower, run the command

bower install

 
  "dependencies": {
    "angular": "~1.3.11",
    "angular-animate": "~1.3.11",
    "angular-bootstrap": "~0.12.0",
    "angular-bootstrap-colorpicker":"3.0.18",
    "angular-chart.js":"~0.7.1",
    "angular-cookies": "~1.3.11",
    "angular-count-to":"*",
    "angular-file-upload": "~1.1.1",
    "angular-inview": "~1.5.0",
    "angular-loading-bar": "~0.7.1",
    "angular-notify": "~2.5.0",
    "angular-perfect-scrollbar": "~0.0.4",
    "angular-resource": "~1.3.11",
    "angular-rickshaw": "~0.10.0",
    "angular-sanitize": "~1.3.11",
    "angular-smart-table": "~1.4.9",
    "angular-touch": "~1.3.11",
    "angular-ui-calendar": "~1.0.0",
    "angular-ui-grid": "~3.0.0-rc.16",
    "angular-ui-router": "~0.2.11",
    "angular-ui-utils": "~0.2.1",
    "angular-xeditable": "~0.1.8",
    "animate.css": "~3.2.0",
    "bootstrap": "~3.3.0",
    "bootstrap-wysiwyg": "*",
    "bootstrap-chosen": "~1.0.0",
    "bootstrap-daterangepicker": "~1.3.17",
    "bootstrap-tagsinput": "~0.4.2",
    "bootstrap-touchspin": "~3.0.1",
    "bower-jvectormap": "~1.2.2",
    "Chart.js":"~1.0.1",
    "chosen": "https://github.com/harvesthq/chosen/releases/download/v1.3.0/chosen_v1.3.0.zip",
    "datatables": "~1.10.4",
    "footable": "~2.0.3",
    "flot": "~0.8.3",
    "flot.tooltip": "~0.8.4",
    "flot.orderbars": "*",
    "flot-spline": "0.0.1",
    "font-awesome": "~4.2.0",
    "fullcalendar": "~2.2.1",
    "html5sortable": "*",
    "jquery": "~2.1.3",
    "jquery.easy-pie-chart": "~2.1.6",
    "jquery-knob":"~1.2.11",
    "jquery.sparkline": "~2.1.2",
    "moment": "~2.10.3",
    "nestable": "*",
    "ng-grid": "~2.0.13",
    "ngImgCrop": "~0.2.0",
    "ngmorris":"~0.0.1",
    "ngstorage": "~0.3.0",
    "oclazyload": "~1.0.1",
    "perfect-scrollbar": "~0.5.1",
    "plugins": "datatables/plugins#~1.0.1",
    "textAngular": "~1.2.2",
    "venturocket-angular-slider": "~0.3.2"
  }

Grunt is a JavaScript task runner (Automation), save yourself from repetitive tasks.

It's probably a bit complex to you if it's your first time using Grunt. However, you'll fail in love with it once you get it, it saves you from repetitive tasks. Project like jQuery, Bootstrap and many more use and love GruntJS.

"Gruntfile.js"

is the configure file of Grunt (You can click the link to know more). It is used to configure or define tasks and load Grunt plugins.

"package.json"

is the JSON file of Grunt (You can click the link to know more). This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Inside package.json file, you'll see all the Grunt plugins that help to automate the tasks.

And all the plugins are configured in Gruntfile.coffee file.

If you want to know more about the plugins, you can click here.

 "devDependencies": {
   "grunt": "^0.4.5",
    "grunt-bower-install-simple": "^0.9.3",
    "grunt-bump": "0.0.15",
    "grunt-changelog": "^0.2.2",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-uglify": "^0.5.1",
    "grunt-recess": "^1.0.0",
    "grunt-swig": "^0.2.1",
    "gruntfile-gtx": "^0.3.0",
    "http-server": "^0.6.1",
    "require-directory": "^2.0.0"
 }

Configure Global App Variables

Open main.js file (app/js/app.main.js) and Change the Global App Scope like Project name, version according to your needs.

you can change the default layout as follows:

• menuFolded: true if you want to initialize the template collapsed side menu.
• chatFolded: true if you want to initialize the template collapsed chat api.
• layoutBoxed: true if you want to initialize the template as boxed layout.
• menuProfile: false if you want to display user profile in main menu.
• searchOpen: true if you want to display search bar as open in header top bar.

Configure Navigation Menu

Open nav.html file (app/partials/components/nav.html)

Find ul with class .wrapper-menu and change or add a menu item in the list as follows:

<li ui-sref-active="active">
       <a ui-sref="app.ui.typography">Typography</a>
</li>

Configure App Router

Open app.router.js file (app/js/app.router.js)

Set up your states in the module config, as in the following:

.state('app.ui.typography', {
       url: '/typography',
          templateUrl: 'partials/ui-typography.html'
})
.state('app.ui.accordion', {
       url: '/accordion',
         templateUrl: 'partials/ui-accordion.html'
})  

Configure lazyload Dependencies

To dynamically load dependencies at runtime when we change states we use oclazyload.

Open app.lazyload.js file (app/js/app.lazyload.js) and configure your modules as below:

  modules: [
              {
                  name: 'ngGrid',
                  files: [
                      '../bower_components/ng-grid/build/ng-grid.min.js',
                      '../bower_components/ng-grid/ng-grid.min.css',
                      '../bower_components/ng-grid/ng-grid.bootstrap.css'
                  ]
              }
]

Bootstrap CSS

For the bootstrap css and components, please check the Bootstrap 3

Angular UI Bootstrap, This project does not use bootstrap.js, but use Angular UI Bootstrap written in pure AngularJS, check UI Boostrap and Official Documents

Icons

• FontAwesome icons 4.1

  Check FontAwesome for more details to see how to use and examples

• Glyphicons

  Bootstrap default icons

Animate

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Colors

This app uses as color palette as below

Open main.js file (app/js/app.main.js) to view the color settings:

The Grid

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

CSS Utilities

In addition to the default bootstrap css, package includes classes that can help you speed up your development work

Core & Plugins

You must know AngularJS, "ui-router" and "ui-jq" to get started your project.

ui-router

ui-router for Nested Routing and Nested View, check the official documents

ui-load

ui-load for lazy loading the js and css files.

ui-load also used in the ui-router resolve:{} for lazy loading Angular Directives, Controllers and Services.

ui-jq

ui-jq Call the jQuery function or plugin specified on the element. check the official documents

ui-module

ui-module Load other dependences for child directive. you need config the dependences in "js/app.js" constant "MODULE_CONFIG".
example: check the "ui-select2" directive on "form/element"

ui-validate

The ui-validate directive makes it very easy to create custom validator expressions. check the official documents

Plugins

All jQuery plugins are depended on ui-jq, do not need create the Angular Directive for each of the plugin. you can config in the app/js/app.js Angular Constant JQ_CONFIG, functionName => pluginPath, the js and css files are lazy loaded.